<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="page">
      <view class="notice-info">
       <!-- #ifdef WEB -->
        <view><text class="text">Web 端背景色为绿色，字体颜色为蓝色</text></view>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <view><text class="text">小程序端背景色为蓝色，字体颜色为红色</text></view>
        <!-- #endif -->
        <!-- #ifdef APP -->
        <view><text class="text">App 端背景色为红色，字体颜色为绿色</text></view>
        <!-- #endif -->
      </view>
      <view class="mt-10">
        <text class="text text-primary">color: $primary-color: #3498db</text>
      </view>
      <view class="mt-10">
        <text class="text text-secondary"
          >color: $secondary-color: #9353D3</text
        >
      </view>
      <view class="list mt-10">
        <view class="item border-radius-4">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
        <view class="item border-radius-4 active mt-10">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
      </view>
      <view class="_list mt-10">
        <view class="item border-radius-4">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
        <view class="item border-radius-4 active mt-10">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
      </view>
      <view class="message-list mt-10">
        <text class="message">message</text>
        <text class="mt-10 success-message">success message</text>
        <text class="mt-10 error-message">error message</text>
      </view>
      <view class="message-list mt-10">
        <text
          >以下 message 字体，Web 端比以上 message 更细，App | MP 端更粗</text
        >
        <text class="mt-10 _message">message</text>
        <text class="mt-10 _success-message">success message</text>
        <text class="mt-10 _error-message">error message</text>
      </view>
      <view class="list mt-10">
        <view class="item-1"><text class="text">item-1</text></view>
        <view class="item-2 mt-10"><text class="text">item-2</text></view>
        <view class="item-3 mt-10"><text class="text">item-3</text></view>
        <view class="item-4 mt-10"><text class="text">item-4</text></view>
        <view class="item-5 mt-10"><text class="text">item-5</text></view>
      </view>
      <view class="list mt-10">
        <view class="_item-1"><text class="text">item-1</text></view>
        <view class="_item-2 mt-10"><text class="text">item-2</text></view>
        <view class="_item-3 mt-10"><text class="text">item-3</text></view>
        <view class="_item-4 mt-10"><text class="text">item-4</text></view>
        <view class="_item-5 mt-10"><text class="text">item-5</text></view>
      </view>
      <view class="debug mt-10">this is debug view</view>
      <view class="_debug mt-10">this is debug view</view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style lang="scss">
@import '../../styles/variables.scss';
@import '../../styles/index.scss';

$secondary-color: #9353d3;

// 使用变量
.text-secondary {
  color: $secondary-color;
}

// 嵌套选择器
._list {
  @extend .padding-10;
  border: $border-width solid $red-color;

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 5px 10px;
    background-color: #3498db;

    // 状态选择器
    &.active {
      background-color: #0983d5;
    }

    .text {
      color: $white-color;
    }
  }
}

// 使用混合器
@mixin _border-radius($radius) {
  border-radius: $radius;
}

._border-radius-4 {
  @include border-radius(4px);
}

._border-radius-10 {
  @include border-radius(10px);
}

.message-list {
  text {
    display: block;
  }
}

// 使用 extends
._message {
  @extend .padding-10;
  @extend ._border-radius-4;
  border: $border-width solid #ccc;
  /* #ifdef APP || MP */
  font-weight: 700;
  /* #endif */
  /* #ifdef WEB */
  font-weight: 300;
  /* #endif */
}

._success-message {
  @extend ._message;
  border-color: $green-color;
  color: $green-color;
}

._error-message {
  @extend ._message;
  border-color: $red-color;
  color: $red-color;
}

// 条件语句
$debug-mode: true;

@if $debug-mode {
  // 调试样式
  ._debug {
    @extend .padding-10;
    @extend ._border-radius-4;
    border: $border-width solid $red-color;
  }
} @else {
  // 生产样式
  ._debug {
    display: none;
  }
}

// 循环
@for $i from 1 through 5 {
  ._item-#{$i} {
    @extend ._border-radius-4;
    width: 60px * $i;
    height: 30px;
    padding-left: 5px;
    background-color: $primary-color;

    .text {
      line-height: 30px;
      color: $white-color;
    }
  }
}
</style>
